<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">我的评价</text>
    </view>

    <!-- 评价列表 -->
    <view class="reviews-list" v-if="reviews.length > 0">
      <view class="review-card" v-for="(item, index) in reviews" :key="index">
        <view class="review-header">
          <view class="photographer-info">
            <image :src="item.avatar" class="avatar"></image>
            <text class="name">{{ item.photographerName }}</text>
          </view>
          <view class="review-date">{{ item.date }}</view>
        </view>
        
        <view class="review-rating">
          <text v-for="n in 5" :key="n" class="rating-star">
            {{ n <= item.rating ? '★' : '☆' }}
          </text>
          <text class="rating-text">{{ getRatingText(item.rating) }}</text>
        </view>
        
        <view class="review-content">
          <text>{{ item.content }}</text>
        </view>
        
        <view class="review-images" v-if="item.images && item.images.length > 0">
          <image 
            v-for="(img, imgIndex) in item.images" 
            :key="imgIndex" 
            :src="img" 
            mode="aspectFill" 
            class="review-image"
            @tap="previewImage(item.images, imgIndex)"
          ></image>
        </view>
        
        <view class="review-order">
          <text class="order-text">订单信息：{{ item.packageName }}</text>
          <text class="order-price">¥{{ item.price }}</text>
        </view>
        
        <view class="review-actions">
          <view class="action-btn" @tap="editReview(item.id)">
            <text class="action-icon">✏️</text>
            <text class="action-text">编辑</text>
          </view>
          <view class="action-btn" @tap="deleteReview(item.id)">
            <text class="action-icon">🗑️</text>
            <text class="action-text">删除</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image src="/static/images/empty-review.png" class="empty-image"></image>
      <text class="empty-text">您还没有发表任何评价</text>
      <button class="empty-btn" @tap="goToOrders">去评价订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reviews: [
        {
          id: 1,
          photographerName: '小明摄影',
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          date: '2023-11-20',
          rating: 5,
          content: '摄影师很专业，拍摄效果非常好，很满意这次的拍摄体验！',
          images: [
            'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
            'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
          ],
          packageName: '基础套餐',
          price: 199
        },
        {
          id: 2,
          photographerName: '小红摄影',
          avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          date: '2023-11-15',
          rating: 4,
          content: '摄影师态度很好，拍摄效果也不错，就是等待时间有点长。',
          images: [
            'https://images.unsplash.com/photo-1551854638-3c5e37b89952?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
          ],
          packageName: '标准套餐',
          price: 299
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    getRatingText(rating) {
      const texts = ['很差', '较差', '一般', '满意', '非常满意'];
      return texts[rating - 1] || '';
    },
    
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      });
    },
    
    editReview(id) {
      uni.navigateTo({
        url: `/pages/edit-review/edit-review?id=${id}`
      });
    },
    
    deleteReview(id) {
      uni.showModal({
        title: '删除评价',
        content: '确定要删除这条评价吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟删除操作
            this.reviews = this.reviews.filter(item => item.id !== id);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    },
    
    goToOrders() {
      uni.navigateTo({
        url: '/pages/orders/orders'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F3F4F6;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}

.icon-back {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.review-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.photographer-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.name {
  font-size: 28rpx;
  font-weight: 500;
}

.review-date {
  font-size: 24rpx;
  color: #6B7280;
}

.review-rating {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.rating-star {
  color: #FBBF24;
  font-size: 32rpx;
  margin-right: 4rpx;
}

.rating-text {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #6B7280;
}

.review-content {
  font-size: 28rpx;
  color: #1F2937;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.review-image {
  width: 150rpx;
  height: 150rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
}

.review-order {
  display: flex;
  justify-content: space-between;
  padding: 15rpx;
  background-color: #F9FAFB;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.order-text {
  font-size: 24rpx;
  color: #6B7280;
}

.order-price {
  font-size: 24rpx;
  color: #EF4444;
  font-weight: 500;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #E5E7EB;
  padding-top: 15rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}

.action-icon {
  font-size: 28rpx;
  margin-right: 6rpx;
}

.action-text {
  font-size: 24rpx;
  color: #6B7280;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #6B7280;
  margin-bottom: 30rpx;
}

.empty-btn {
  background-color: #8B5CF6;
  color: #fff;
  font-size: 28rpx;
  padding: 15rpx 40rpx;
  border-radius: 40rpx;
}
</style>